<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>Login</title>
  </head>
  <style>
  .top{
     width: 400px; 
     height: 400px;
     margin-top: 50px;
     margin: 0 auto;
     line-height:50px;
     box-shadow:0 0px 10px #aaa;
     font-size:25px;
  }
  .up{
     width: 400px; 
     height: 300px;
  }
  .warn{
     width: 900px; 
     height: 30px;
     margin: 0 auto;
     text-align:center;
     color:blue;
  }
  
.middle{
    width: 400px; 
    height: 100px;
    margin: 0 auto;
    text-align:center;
    font-size:20px;
    display: flex;
  }
  .img{
    width: 200px; 
    height: 100px;
  }
  .button{
     width: 110px; 
     height: 30px;
     margin-top: 50px;
     margin: 0 auto;
     box-shadow:0 0px 10px #aaa;
     text-align:center;
  }
  .but{
     width: 110px; 
     height: 30px;
     border:none;
     background:#FFFFFF;
  }
</style>
  <body>
   <form method="POST" th:action="@{/login}" id="loginForm">
  <div class="top">
    <div class="up">
    <h1  align="center">登录</h1>
    
    <div class="warn" th:if="${error}"> 
      Unable to login. Check your username and password.
    </div>
    
    <p align="center">没有账号，请先☛
       <a th:href="@{/register}">注册</a>☚ </p>
    
      <label for="username">用户名: </label>
      <input type="text" name="username" id="username" /><br/>
      
      <label for="password">密码:  </label>
      <input type="password" name="password" id="password" /><br/>
      </div>
      <div class="middle">
        <div class="img">
          <img th:src="@{/images/6.jpg}"  width="70" height="100"/>
        </div>
        <div class="img">
          <img th:src="@{/images/7.jpg}"  width="70" height="100"/>
        </div>
     </div>
    </div>
    <div class="button">   
      <input class="but" type="submit" value="Login"/>
    </div>
    </form>
  </body>
</html>